<template>
	<div class="ring_ratio">
		<x-header title="经营详情" :left-options="{backText: '✖'}">
		</x-header>
		<div class="content">
			<div class="time_nav">
				<tab>
					<tab-item :selected="selectIndex===0" @on-item-click="onItemClick">昨日</tab-item>
					<tab-item :selected="selectIndex===1" @on-item-click="onItemClick">近7天</tab-item>
					<tab-item :selected="selectIndex===2" @on-item-click="onItemClick">近30天</tab-item>
					<tab-item :selected="selectIndex===3" @on-item-click="onItemClick">自定义</tab-item>
				</tab>
				<div class="select_dates" v-if="selectIndex===3">
					<div class="select_dates_left">
						<group>
							<datetime placeholder="开始日期" v-model="value1" @on-change="change1" @on-cancel="log1('cancel')" @on-confirm="onConfirm1" @on-hide="log1('hide', $event)"></datetime>
						</group>
					</div>
					<p style="padding-top: .2rem;">至</p>
					<div class="select_dates_right">
						<group>
							<datetime placeholder="结束日期" v-model="value2" @on-change="change2" @on-cancel="log2('cancel')" @on-confirm="onConfirm2" @on-hide="log2('hide', $event)"></datetime>
						</group>
					</div>
				</div>
			</div>
			<div class="detail_datas">
				<div class="detail_data_title">
					<img src="../../assets/images/statistics/blue.jpg" alt="" />
					<p>营业详细数据</p>
				</div>
				<div class="turnover">
					<p>营业额<span>新</span><img src="../../assets/images/statistics/help.jpg" alt="" /></p>
					<p @click="open_1">￥<span>0.00</span><img :class="{opens:open1}" src="../../assets/images/statistics/arrow_down.png" alt="" /></p>
					<p v-if="selectIndex===0">比前1日--</p>
					<p v-if="selectIndex===1">比前7日--</p>
					<p v-if="selectIndex===2">比前30日--</p>
					<p v-if="selectIndex===3">比前{{ differ_days }}日--</p>
				</div>
				<div class="open_data1" v-if="open1">
					<p><span>彩品原价：</span>￥0.00</p>
					<p><span>餐盒费：</span>￥0.00</p>
					<p><span>配送收入：</span>￥0.00</p>
				</div>
				<div class="valid_orders">
					<div class="valid_order">
						<p>有效订单<img src="../../assets/images/statistics/help.jpg" alt="" /></p>
						<p>0单</p>
						<p v-if="selectIndex===0">比前1日--</p>
						<p v-if="selectIndex===1">比前7日--</p>
						<p v-if="selectIndex===2">比前30日--</p>
						<p v-if="selectIndex===3">比前{{ differ_days }}日--</p>
					</div>
					<div class="unit_price">
						<p>单均价<img src="../../assets/images/statistics/help.jpg" alt="" /></p>
						<p>￥--</p>
						<p v-if="selectIndex===0">比前1日--</p>
						<p v-if="selectIndex===1">比前7日--</p>
						<p v-if="selectIndex===2">比前30日--</p>
						<p v-if="selectIndex===3">比前{{ differ_days }}日--</p>
					</div>
				</div>
				<div class="order_income">
					<p>订单收入<img src="../../assets/images/statistics/help.jpg" alt="" /></p>
					<p>￥0.00</p>
					<p>比前7日--</p>
				</div>
				<div class="act_subsidy">
					<div class="order_income">
						<p>活动补贴<img src="../../assets/images/statistics/help.jpg" alt="" /></p>
						<p @click="open_2">￥0.00<img :class="{opens:open2}" src="../../assets/images/statistics/arrow_down.png" alt="" /></p>
						<p>比前7日--</p>
					</div>
					<div class="act_subsidy_data" v-if="open2">
						<p><span>商家补贴：</span>￥0.00</p>
						<p><span>平台补贴：</span>￥0.00</p>
					</div>
				</div>
			</div>
		</div>
		<alert v-model="show1" title="提示" @on-show="onShow">{{ alert_title }}</alert>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, Datetime, Group, Alert } from 'vux';
	export default {
		name: 'ring_ratio',
		data() {
			return {
				selectIndex: 1, //0-昨日  1-近7天  2-近30天  3-自定义
				value1: '', //开始日期
				value2: '', //结束日期
				differ_days: 0, //相差的天数
				show1: false,
				alert_title: '',
				open1: false, //是否展开营业额
				open2: false, //是否展开活动补贴
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Datetime,
			Group,
			Alert
		},
		computed: {

		},
		created() {
			this.selectIndex = +this.$route.params.id;
		},
		methods: {
			//时间切换
			onItemClick(index) {
				this.selectIndex = index;
			},
			change1() {

			},
			log1() {

			},
			onConfirm1() {

			},
			change2() {

			},
			log2() {

			},
			onConfirm2(val) {
				if(!this.value1) {
					this.show1 = true;
					this.alert_title = '请先选择开始日期';
					this.value1 = this.value2 = '';
					return;
				}
				this.value2 = val;
				//计算相差天数
				let s1 = this.value1;
				let s2 = this.value2;
				s1 = new Date(s1.replace(/-/g, "/"));
				s2 = new Date(s2.replace(/-/g, "/"));
				let days = s2.getTime() - s1.getTime();
				if(days <= 0) {
					this.show1 = true;
					this.alert_title = '结束日期不能小于开始日期';
					this.value2 = '';
					return;
				}
				if(days !== days || days <= 0) {
					this.differ_days = 0;
				} else {
					this.differ_days = parseInt(days / (1000 * 60 * 60 * 24));
				}
				//console.log(this.differ_days);
			},
			onShow() {

			},
			//展开营业额
			open_1() {
				this.open1 = !this.open1;
			},
			//展开活动补贴
			open_2() {
				this.open2 = !this.open2;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.ring_ratio {
		.content {
			.time_nav {
				background: #fff;
				margin-bottom: .18rem;
				.select_dates {
					height: 1.2rem;
					background: #fff;
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding-bottom: .2rem;
					border: 1px solid #f0f0f0;
				}
			}
			.detail_datas {
				background: #fff;
				.detail_data_title {
					display: flex;
					align-items: center;
					padding: .24rem;
					border-bottom: 1px solid #f0f0f0;
					img {
						width: .09rem;
						height: .39rem;
					}
					p {
						font-size: .34rem;
						color: #191919;
						font-weight: 700;
						margin-left: .28rem;
					}
				}
				.turnover {
					width: 100%;
					padding-left: .34rem;
					>p:nth-of-type(1) {
						display: flex;
						align-items: center;
						font-size: .26rem;
						color: #909090;
						letter-spacing: .02rem;
						margin-top: .22rem;
						span {
							font-size: .2rem;
							color: #e25251;
							border: 1px solid #e25251;
							padding: 0 .02rem;
							margin-left: .02rem;
							border-radius: .02rem;
						}
						img {
							width: .26rem;
							height: .26rem;
							margin-left: .12rem;
						}
					}
					>p:nth-of-type(2) {
						display: flex;
						align-items: center;
						text-align: left;
						margin: .14rem 0;
						span {
							font-size: .36rem;
							font-weight: 700;
						}
						img {
							width: .36rem;
							height: .36rem;
							margin-left: .06rem;
						}
						.opens {
							transform: rotate(180deg);
						}
					}
					>p:nth-of-type(3) {
						text-align: left;
						font-size: .22rem;
						color: #6a6a6a;
					}
				}
				.open_data1 {
					width: 92%;
					margin: .32rem auto 0 auto;
					background: #fafafa;
					padding: .22rem .2rem;
					p {
						display: flex;
						align-items: center;
						font-size: .26rem;
						color: #515151;
						span {
							width: 1.3rem;
							text-align: right;
						}
					}
					p:nth-of-type(2) {
						margin: .06rem 0;
					}
				}
				.valid_orders {
					display: flex;
					padding-bottom: .46rem;
					.valid_order,
					.unit_price {
						width: 50%;
						padding-left: .34rem;
						text-align: left;
						p:nth-of-type(1) {
							display: flex;
							align-items: center;
							font-size: .26rem;
							color: #909090;
							letter-spacing: .02rem;
							margin-top: .22rem;
							img {
								width: .26rem;
								height: .26rem;
								margin-left: .12rem;
							}
						}
						p:nth-of-type(2) {
							font-size: .26rem;
							color: #333;
							margin: .14rem 0;
						}
						p:nth-of-type(3) {
							font-size: .22rem;
							color: #6a6a6a;
						}
					}
				}
				.order_income {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: .56rem .26rem .38rem .26rem;
					border-top: 1px solid #f0f0f0;
					p:nth-of-type(1) {
						font-size: .26rem;
						color: #909090;
						img {
							width: .26rem;
							height: .26rem;
							margin-left: .12rem;
						}
					}
					p:nth-of-type(2) {
						margin-left: -1rem;
						font-size: .22rem;
						color: #0f0f0f;
					}
					p:nth-of-type(3) {
						font-size: .22rem;
						color: #6a6a6a;
					}
				}
				.act_subsidy {
					padding-bottom: .46rem;
					p:nth-of-type(2) {
						display: flex;
						align-items: center;
						img {
							width: .36rem;
							height: .36rem;
						}
					}
					.opens {
						transform: rotate(180deg);
					}
					.act_subsidy_data {
						width: 92%;
						margin: 0 auto;
						background: #fafafa;
						padding: .22rem .2rem;
						p {
							display: flex;
							align-items: center;
							font-size: .26rem;
							color: #515151;
							span {
								width: 1.3rem;
								text-align: right;
							}
						}
						p:nth-of-type(2) {
							margin-top: .06rem;
						}
					}
				}
			}
		}
	}
</style>